import React,{useRef,useReducer,createContext } from 'react'
import Test from './Test.jsx';

export const Context = createContext()

export default function ShoppingList() {
    const inputRef = useRef();
    const [items, dispatch] = useReducer((state,action)=> {
        switch(action.type){
            case 'add':
                return [...state,
                    {
                        id:state.length,
                        name:action.name
                    }]

            case 'remove':
                return state.filter((_,index) => index !== action.index)

            case 'clear':
                return [];
            default:
                return state;
            }
    },[])
    
    function handleSubmit(event){
        event.preventDefault();
        dispatch({
            type:'add',
            name:inputRef.current.value
        });
        inputRef.current.value = '';
    }
    
    return (
        <>
            <form onSubmit={handleSubmit}>

                <input ref={inputRef}/>
            </form>
            <button
                className="button is-danger"
                onClick={
                () => dispatch({type:'clear'})
            }>clear</button>
            <ul>
                {items.map((item,index) => (
                    <li className="section" key={item.id}>{item.name}
                        <button className="button" onClick={
                            () => dispatch({type:'remove',index})
                        }>X</button>
                    </li>
                ))}
            </ul>
            <hr />
            <Context.Provider value={[items, dispatch]}>
                <Test/>
            </Context.Provider>
        </>
    )
}